<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Welcome dom and Jquery</title>
</head>
<body>
<h2>Welcome this is the parent</h2>
<h1 id="header">Welcome to Javascript </h1>

<div>

    <ul>
        <li class="red">John</li>
        <li class="blue">Jim</li>
        <li class="red">Sam</li>
        <li class="blue">Brian</li>
        <li class="red">Kyle</li>
        <li class="blue">Ryan</li>
        <li class="blue">Nick</li>
        <li class="red">David</li>
    </ul>
</div>

<script type="text/javascript">
    var redElements = document.getElementsByClassName('red');
    //[]
    //zero or more
    var blueElements = document.getElementsByClassName('blue');
    var headerElement = document.getElementById('header');

    headerElement.style.backgroundColor = "green";
    var i,j;
    for(i = 0; i< redElements.length; i++){
        redElements[i].style.backgroundColor = 'red';

        if(redElements[i].innerHTML === 'David'){
            redElements[i].innerHTML = 'Adams';
        }
    }

    for(j = 0; j < blueElements.length; j++){
        blueElements[j].style.backgroundColor = 'blue';
    }


    //dom -- html
    //native methods have lot of inconsistencies among various browsers
    //zoom // scale
    //standards w3c --world wide web --

    //if(ie)
    //if(firefox)
    //
    // window.navigator.userAgent
    // Spartan

    // John Resig -- Jquery

    // cross browser issues


</script>
</body>
</html>